<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('基金评估') }}
        <span style="font-size: 14px;font-weight: bold;color: #f57a7a;">({{ $t('基金评分') }}：{{ totalScore }})</span>
      </span>
      <div>
        <el-button
          v-if="totalScore"
          v-hasPermi="['bf:evaluation:view']"
          icon="el-icon-pie-chart"
          size="mini"
          @click="leiDa"
        >{{ $t('雷达图') }}</el-button>
        <el-button
          v-hasPermi="['bf:evaluation:edit']"
          icon="el-icon-s-opportunity"
          size="mini"
          type="success"
          @click="autoCalc"
        >{{ $t('自动计算') }}</el-button>
        <el-button
          v-hasPermi="['bf:evaluation:edit']"
          icon="el-icon-check"
          size="mini"
          type="primary"
          @click="submitScore"
        >{{ $t('保存评分') }}</el-button>
      </div>
    </div>
    <div v-loading="loading" style="width: 100%;overflow: auto;">
      <table class="bfEvaluation" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
        <tr>
          <th style="width: 150px;">{{ $t('一级指标') }}</th>
          <th style="width: 70px;">{{ $t('权重') }}</th>
          <th style="width: 150px;">{{ $t('二级指标') }}</th>
          <th style="width: 70px;">{{ $t('权重') }}</th>
          <th style="width: 300px;">{{ $t('三级指标') }}</th>
          <th style="width: 70px;">{{ $t('权重') }}</th>
          <th style="width: 130px;">{{ $t('评分（100分）') }}</th>
          <th style="width: 70px;">{{ $t('合计') }}</th>
        </tr>
        <template v-for="(v) in bfEvaluationDetailList">
          <tr :key="v.id">
            <td>
              <p>{{ v.indicators }}</p>
            </td>
            <td><p style="text-align: center">{{ v.weight }}%</p></td>
            <td>
              <div v-for="vv in v.children" :key="vv.id" class="cell-box">
                <div v-if="vv.children.length > 0" class="cell-dev" :style="{'height': vv.children.length * 40 + 'px','line-height': vv.children.length * 40 + 'px'}">{{ vv.indicators }}</div>
                <div v-else class="cell-dev" style="text-align: center;height: 40px;line-height: 40px;">{{ vv.indicators }}</div>
              </div>
            </td>
            <td>
              <div v-for="vv in v.children" :key="vv.id" class="cell-box">
                <div v-if="vv.children.length > 0" class="cell-dev" :style="{'height': vv.children.length * 40 + 'px','line-height': vv.children.length * 40 + 'px'}">{{ vv.weight }}%</div>
                <div v-else class="cell-dev" style="text-align: center;height: 40px;line-height: 40px;">{{ vv.weight }}%</div>
              </div>
            </td>
            <td>
              <div v-for="vv in v.children" :key="vv.id" class="cell-boxx">
                <div v-for="vvv in vv.children" :key="vvv.id" class="cell_con">
                  <div class="cell-dev">{{ vvv.indicators }}</div>
                </div>
              </div>
            </td>
            <td>
              <div v-for="vv in v.children" :key="vv.id" class="cell-boxx">
                <div v-for="vvv in vv.children" :key="vvv.id" class="cell_con">
                  <div class="cell-dev" style="text-align: center;">{{ vvv.weight }}%</div>
                </div>
              </div>
            </td>
            <td>
              <div v-for="vv in v.children" :key="vv.id" class="cell-boxx">
                <div v-for="vvv in vv.children" :key="vvv.id" class="cell_con">
                  <div class="cell-dev" style="text-align: center">
                    <el-input-number v-model="vvv.score" :max="100" :min="0" size="mini" :controls="true" style="width: 100px;" />
                  </div>
                </div>
              </div>
            </td>
            <td>
              <div v-for="vv in v.children" :key="vv.id" class="cell-boxx">
                <div v-for="vvv in vv.children" :key="vvv.id" class="cell_con">
                  <div class="cell-dev" style="text-align: center"> {{ vvv.mulScore }}</div>
                </div>
              </div>
            </td>
          </tr>
          <tr :key="v.id" style="height: 38px;">
            <td colspan="7"><p style="font-weight: bold;">合计</p></td>
            <td><p style="text-align: center; font-weight: bold;color: #f57a7a;">{{ v.score }}</p></td>
          </tr>
        </template>
      </table>
    </div>
    <div style="text-align: right;margin-top: 10px;">
      <el-button
        v-if="totalScore"
        v-hasPermi="['bf:evaluation:view']"
        icon="el-icon-pie-chart"
        size="mini"
        @click="leiDa"
      >{{ $t('雷达图') }}</el-button>
      <el-button
        v-if="bfEvaluationDetailList && bfEvaluationDetailList.length > 5"
        v-hasPermi="['bf:evaluation:edit']"
        icon="el-icon-check"
        size="mini"
        type="primary"
        @click="submitScore"
      >{{ $t('保存评分') }}</el-button>
    </div>
    <!-- 添加或修改基金评估模板对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <radarChart v-if="formOpen" ref="radarChart" :chart-data="chartData" />
    </el-dialog>
  </div>
</template>

<script>
import { getAllData, submitScore, autoScore } from '@/api/deal/bf/evaluation/bfEvaluationDetail'
import { getBfEvaluationByDealId } from '@/api/deal/bf/evaluation/bfEvaluation'
import radarChart from '@/views/chart/radarChart.vue'
import { getEchartsData } from '@/api/deal/bf/evaluation/bfEvaluationDetail'
export default {
  components: {
    radarChart
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 基金评估评分主体表格数据
      bfEvaluationDetailList: [],
      // 弹出层标题
      title: '基金评估',
      // 是否显示弹出层
      formOpen: false,
      // 关联项目ID
      dealId: this.$route.query.id,
      // 查询参数
      queryParams: {
        dealType: this.$route.query.dealType,
        dealId: this.$route.query.id
      },
      // 表单参数
      form: {},
      // 基金总评分
      totalScore: 0.00,
      // 表单校验
      rules: {},
      chartData: {
        series: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询基金评估评分主体列表 */
    getList() {
      this.loading = true
      getAllData(this.queryParams).then(response => {
        this.bfEvaluationDetailList = response.rows
        console.log(this.bfEvaluationDetailList)
        this.total = response.total
        this.loading = false
      })
      // 获取基金总评分
      getBfEvaluationByDealId(this.queryParams.dealId).then(res => {
        this.totalScore = res.data.totalScore
      })
      var queryParams = {
        dealType: this.$route.query.dealType,
        dealId: this.$route.query.id
      }
      // 获取雷达图数据
      this.chartData = {
        name: '',
        indicator: [],
        series: []
      }
      getEchartsData(queryParams).then(res => {
        if (res.data !== null) {
          this.chartData.name = res.data.dealName
          this.chartData.indicator = res.data.nameArray
          this.chartData.series = res.data.scoreArray
        }
      })
    },
    // 打开雷达图
    leiDa() {
      this.formOpen = true
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        dealId: undefined,
        evaluationDetailId: undefined,
        totalScore: undefined,
        evaluate: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        remark: undefined
      }
      this.resetForm('form')
    },
    // 保存评分
    submitScore() {
      var data = { children: this.bfEvaluationDetailList, dealId: this.dealId }
      this.loading = true
      submitScore(data).then(response => {
        if (response.code === 200) {
          this.getList()
          this.loading = false
          this.msgSuccess(this.$t('保存成功'))
        } else {
          this.msgError(response.msg)
        }
      })
    },
    // 自动计算分数
    autoCalc() {
      this.$confirm('此操作将清空评分项并自动计算，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.loading = true
            autoScore(this.queryParams).then(response => {
            this.bfEvaluationDetailList = response.data
            this.loading = false
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消自动计算'
          })
        })
    }
  }
}
</script>
<style scoped>
.area-header{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: space-between;
}
</style>
